<template>
    <div>
        <NavBarVue>
            <div slot="left" class="back" @click="backClick">
                <span class="icon-arrow-up"></span>
            </div>
            <div class="title" slot="center">
                <div class="title-item" @click="titleClick(index)" :class="{active:index===currentIndex}" v-for="(item,index) in titles">
                    {{item}}
                </div>
            </div>
        </NavBarVue>
    </div>
</template>

<script>
import NavBarVue from '@/components/common/navbar/NavBar.vue'
    export default{
        name : 'DetailNavBar',
        data (){
            return {
                titles:['商品','商家','展示','参数'],
                currentIndex : 0
            }
        },
        methods : {
            titleClick(index){
                this.currentIndex = index
                this.$emit('titleClick',index)
            },
            backClick(){
                this.$router.go(-1)
            }
        },
        components : {
            NavBarVue
        }
    }
</script>

<style scoped>
    .back{
        transform: rotate(-90deg);
        font-size: 18px;
    }
    .title{
        display: flex;
        font-size: 13px;
    }
    .title-item{
        flex: 1;
    }
    .active{
        color: var(--color-high-text);
    }
</style>